<template>
    <div>
      <table>
        <thead>
          <tr>
            <th>任务ID</th><th>状态</th><th>结果</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="task in tasks" :key="task.id">
            <td>{{ task.id }}</td>
            <td>{{ task.status }}</td>
            <td>{{ task.result }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </template>
  
  <script setup>
  import { io } from 'socket.io-client';
  import { ref, onMounted } from 'vue';
  
  const tasks = ref([]);
  
  const socket = io('http://127.0.0.1:8000/ws/task_status/'); // 注意这里的URL应匹配后端的WebSocket路径
  
  onMounted(() => {
    // 假设你有多个任务ID，这里简化为硬编码的示例
    // const taskIds = ['task1', 'task2', 'task3'].join(',');
    const taskIds = [
    "64c2ab8e-8418-4df0-a91c-2a9052130458",
    "05357c27-9528-4e22-b665-c7304c2184cd",
    "7db67439-584c-442d-8363-22b993456144",
    "62ceeb4a-801d-4274-9009-a33a315e7362"
  ];
    socket.emit('task_ids', taskIds);
  
    socket.on('connect', (data) => {
        console.log("socket_id:", socket.id);
      const [taskId, status, result] = data.split(':');
      const task = tasks.value.find(t => t.id === taskId);
      if (task) {
        task.status = status;
        task.result = result;
      } else {
        tasks.value.push({ id: taskId, status, result });
      }
    });
  });
  </script>